<template>
    <div class="hotandnew-detail">
        <div class="hotandnew-header">
            <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="$router.back()" fixed />
        </div>
        <div class="hotandnew-banner">
            <img src="http://jinglins.gitee.io/bufan-tesco-mall/assets/new-list-banner-b691c95d.png" v-if="title == '新品首发'">
            <img src="http://jinglins.gitee.io/bufan-tesco-mall/assets/hot-list-banner-ccf22d3f.png" v-else>
        </div>
        <div class="hotandnew-list">
            <div v-for="(item,index) in arr" :key="index">{{ item }}</div>
        </div>
        <detialList data="1" v-if="title == '新品首发'"/>
        <detialList data="2" v-else />
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
import {ref,reactive} from 'vue'
import detialList from './detialList.vue';
const title =ref<string>('')
const arr=reactive(['综合','价格','分类'])
const route =useRoute()
onMounted(()=>{
    title.value=route.query.name as string
})
</script>

<style scoped  lang="scss">
.hotandnew-detail{
    .hotandnew-header{
        height: 45px;
    }
    .hotandnew-banner{
        width: 100%;
        height: 1.63rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .hotandnew-list{
        width: 100%;
        height: 0.5rem;
        background: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
}
</style>